<template>
  <div class="page-container page-container-create">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>拼团</el-breadcrumb-item>
        <el-breadcrumb-item>创建拼团活动</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <p class="font22 mb20" v-if="promotionId && promotionId != '0'">编辑拼团活动</p>
    <p class="font22 mb20" v-else>创建拼团活动</p>

  <!-- 页面样式部分 -->
  <div class="toolbar">
    <!-- 步骤条 -->

      <div class="stepset" >
        <ul>
          <li :class="{'active':active>=1}"><span>1</span><p>设置拼团规则</p></li>
          <!-- <li :class="{'active':active>=2}"><span>2</span><p>选择参与商家/店铺</p></li> -->
          <li :class="{'active':active>=3}"><span>2</span><p>设置参与商品</p></li>
          <li :class="{'active':active>=4}"><span>3</span><p>活动创建成功</p></li>
        </ul>
      </div>
    <!-- 第一步 -->
    <div v-show="active == 1" class="content create_stepOne createSet create_stepAlso">
      <el-form :model="filters" :rules="dataFormRules" ref="filters" :inline="true" :label-position="labelPosition" label-width="140px">
        <div>
          <div class="title">基本信息：</div>
          <div class="item">
            <el-row class="m_b30">
              <el-form-item label="活动名称：" prop="promName" class="color999">
                <el-input clearable v-model.trim="filters.promName" type="text" placeholder="请输入3-60个字符之间" maxlength="60" minlength="3" class="input"/>
              </el-form-item>
            </el-row>
            <el-row  class="m_b30">
              <el-form-item label="活动时间：" prop="promotionStartEndTime" class="wid color999 w450">
                <div style="width:100%;">
                  <el-date-picker
                    v-model="filters.promotionStartEndTime"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    size="mini"
                    :picker-options="startTimePickerOptions"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  ></el-date-picker>
                </div>
              </el-form-item>
            </el-row>
            <el-row class="m_b30">
              <el-form-item label="活动搜索词：" prop="searchKeyword" class="color999">
                <el-input clearable v-model.trim="filters.searchKeyword" type="text" placeholder="多个搜索词可用数据逗号“,”隔开" maxlength="60" minlength="3" class="input"/>
              </el-form-item>
            </el-row>
            <el-row class="m_b30">
              <el-form-item label="活动费用预算：" prop="budget" class="color999">
                <el-input clearable v-model.number="filters.budget" type="text"
                placeholder="请输入费用预算" maxlength="60" minlength="3" class="input"
                style="width: 680px !important;" oninput="value=value.replace(/[^\d]/g,'')"/>
                <span class="s1">元</span>
              </el-form-item>
            </el-row>
            <el-row class="m_b30">
                <el-form-item label="预警比例：" prop="warningNum" class="color999">
                  <el-input
                    type="text"
                    v-model.trim="filters.warningNum"
                    placeholder="请输入预警比例"
                    class="input" clearable
                    style="width: 680px !important;"
                  /><span class="s1"> %</span>
                </el-form-item>
            </el-row>
          </div>
        </div>
        <div>
            <div class="title">活动规则：</div>
            <div class="item">
              <el-row class="m_b30">
                <div style="width:100%;">
                  <el-form-item label="预热时间：" prop="preheatTime" class="wid">
                    <el-input clearable type="text" v-model.number="filters.preheatTime"  maxlength="4"  oninput="value=value.replace(/[^\d]/g,'')" />
                  </el-form-item> <span class="s1">小时</span>
                  <el-tooltip effect="dark" content="活动开始前会在商品详情页展示活动信息" placement="right">
                    <i class="tipsInfo">!</i>
                  </el-tooltip>
                </div>
              </el-row>
              <el-row  class="m_b30 labelAlignment">
                <el-form-item label="团单时长：" prop="groupTimeType" class="wid">
                  <div style="width:100%;">
                    <el-radio  class="mr40 radioAlignment noMarginLeft"  v-model="filters.groupTimeType" label="0" >不限</el-radio>
                    <el-radio  class="noMarginLeft radioAlignment"  v-model="filters.groupTimeType" label="1" >限</el-radio>
                    <el-input clearable class="w198" type="text" v-model="filters.groupTimeLimit" placeholder="团单时长时间" maxlength="2" v-if="filters.groupTimeType == '1'" oninput="this.value=this.value.replace(/[^0-9]/g,'');"/>
                    <span v-if="filters.groupTimeType == '1'" class="ml15 color333 font16">小时</span>
                  </div>
                </el-form-item>
              </el-row>
              <el-row  class="m_b30">
                  <el-form-item label="自动成团设置：" required class="wid">
                    <div style="width:100%;">
                      <span class="color333 font16">距结束 </span>
                      <el-input clearable class="w250" type="text" v-model="filters.autoCompleteTime" maxlength="2"  oninput="this.value=this.value.replace(/[^0-9]/g,'');"/>
                      <span class="s1 font16 color333">小时未成团则自动成团 </span>
                      <el-tooltip effect="dark" content="距离拼团活动结束时间XX小时未成团的拼团单可自动成团" placement="right">
                        <i class="tipsInfo">!</i>
                      </el-tooltip>
                    </div>
                  </el-form-item>
              </el-row>
              <el-row  class="m_b30 labelAlignment">
                <el-form-item label="单用户参团限制：" prop="individualJoinType" class="wid">
                  <div>
                    <el-radio  class="mr40 noMarginLeft  radioAlignment"  v-model="filters.individualJoinType" label="0" >不限</el-radio>
                    <el-radio  class="noMarginLeft radioAlignment"  v-model="filters.individualJoinType" label="1" >限</el-radio>
                    <el-input clearable class="w198" type="text" maxlength="3" v-model="filters.individualJoinTime" v-if="filters.individualJoinType == '1'"  oninput="value=value.replace(/[^\d]/g,'')"/>
                    <span v-if="filters.individualJoinType == '1'" class="ml15 color333 font16">次</span>
                  </div>
                </el-form-item>
              </el-row>
              <el-row  class="m_b30">
                <el-form-item label="拼团人数：" prop="groupMembers" class="wid">
                  <div style="width:100%;">
                    <el-input clearable v-model="filters.groupMembers" auto-complete="off" type="text" placeholder="拼团人数/人" maxlength="2" :size="size" oninput="this.value=this.value.replace(/[^0-9]/g,'');"></el-input>
                  </div>
                </el-form-item>
              </el-row>
              <!-- 上传图片相关页面 开始  -->
              <el-row  class="m_b30">
                <el-form-item  class="wid">
                  <div class="flexBox">
                    <span class="font16 color333 turnInlineBlock ml60 titleText">活动图片：</span>
                    <div style="width: 775px;border: 1px solid rgb(162, 162, 162);height: 300px;overflow-y: auto;display: flex;flex-wrap: wrap;">
                    <div tabindex="0" class="el-upload el-upload--picture-card img-card-upload" @click="selectUploadMethod">
                      <i data-v-5410c7af="" class="el-icon-plus"></i>
                    </div>
                    <div class="img-card" v-for="(item, index) in imgUrlList" :key="index" @mouseleave="mouseLeave(index)" @mouseenter="mouseEnter(index)">
                      <el-image :src="item.url" style="width: 100%;height: 100%;"/>
                      <span class="el-upload-list-item-actions" :class="imgUrlList[index].hover != null ? 'el-upload-list-item-actions-hover' : '' ">
                        <span class="el-upload-list__item-preview upload-delete" @click="deleteImgUrlList(index)">
                          <i class="el-icon-delete deleteButton" ></i>
                        </span>
                      </span>
                    </div>
                  </div>
                  </div>

                </el-form-item>
              </el-row>
              <!-- 上传图片相关页面 结束  -->
              <!-- <el-row class="pdL10 labelAlignment">
                <el-form-item label="活动描述：" prop="description" class="wid">
                  <el-input clearable
                            type="textarea"
                            :rows="2"
                            class="activityDesc"
                            placeholder="最多输入100个字"
                            v-model="filters.description"
                            maxlength="100"
                            show-word-limit
                  >
                  </el-input>
                </el-form-item>
              </el-row> -->
              <!-- <el-row>
                <el-form-item label="" class="wid">
                  <div class="desc color666">
                    注：非必填字段，不填将显示系统默认文案（会存在某些促销类型无系统默认文案）。自定义输入活动规则描述描述后将显示在前台商品详情页中，请慎重填写。
                  </div>
                </el-form-item>
              </el-row> -->
            </div>
        </div>
        <div class="w100">
          <div class="title">交易规则：</div>
          <div class="item">
            <el-row class="m_b30 ways labelAlignment" v-if="deptType != 3">
              <el-form-item label="是否分摊：" prop="costAllocationFlag" class="wid">
                <div style="width:100%;">
                  <el-row class="m_b52">
                    <el-radio-group v-model="filters.costAllocationFlag" prop="costAllocationFlag" @change="costAllocationFlagChange">
                      <el-radio border class="mr40 w130 t_l noMarginLeft" v-model="filters.costAllocationFlag" checked="true" label="1" value="1" >是</el-radio>
                      <el-radio border class="mr40 w130 t_l noMarginLeft" v-model="filters.costAllocationFlag" label="0" value="0" >否</el-radio>
                    </el-radio-group>
                  </el-row>
                </div>
              </el-form-item>
            </el-row>
          </div>
        </div>
        <div>
            <div class="title">参与条件：</div>
            <div class="item">
              <el-row  class="m_b30">
                <el-form-item label="开团活动对象：" prop="customerLimit" class="wid labelAlignment">
                  <div style="width:100%;">
                    <el-radio-group v-model="filters.customerLimit" >
                      <el-radio border class="mr40 radioAlignment  noMarginLeft w130 t_l" v-for="(city) in customerLimitRadios" :label="city.code" :key="city.code">{{city.name}}</el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item>
              </el-row>
              <el-row  class="m_b30">
                <el-form-item label="参团活动对象：" prop="offeredCustomerLimit" class="wid labelAlignment">
                  <div style="width:100%;">
                    <el-radio-group v-model="filters.offeredCustomerLimit" >
                      <el-radio border class="mr40 radioAlignment  noMarginLeft w130 t_l" v-for="(city) in offeredCustomerLimitRadios" :label="city.code" :key="city.code">{{city.name}}</el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item>
              </el-row>
              <el-row class="m_b52 labelAlignment">
                <el-form-item label="新老用户：" prop="selectUserType" class="wid t_r" label-width="140px">
                  <div class="flex">
                    <el-checkbox class="mr40  el-checkBox-padding noMarginLeft w130 t_l mleft10" border :indeterminate="userTypeIsIndeterminate" v-model="userTypeCheckAll" @change="handleCheckAllUserTypeChange">全选</el-checkbox>
                    <el-checkbox-group v-model="selectUserType" @change="handleCheckedUserTypeChange">
                      <el-checkbox :label="1" border :key="1" class="mr40 el-checkBox-padding noMarginLeft w130 t_l">新用户</el-checkbox>
                      <el-checkbox :label="2" border :key="2" class="el-checkBox-padding noMarginLeft w130 t_l">老用户</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </el-form-item>
              </el-row>
              <el-row class="m_b52 labelAlignment">
                <el-form-item label="会员类型：" prop="selectMemTypes" class="wid t_r" label-width="140px">
                  <div class="flex">
                    <el-checkbox :indeterminate="memTypeIsIndeterminate" v-model="memTypeCheckAll" @change="handleCheckAllMemTypeChange" border class="w130 t_l mr40 el-checkBox-padding noMarginLeft mleft10">全选</el-checkbox>
                    <el-checkbox-group v-model="selectMemTypes" @change="handleCheckedMemTypeChange">
                      <el-checkbox :label="1" :key="1" border class="mr40 el-checkBox-padding noMarginLeft">普通会员</el-checkbox>
                    <el-checkbox :label="2" :key="2" border class="el-checkBox-padding noMarginLeft">we2000</el-checkbox>
                      <el-checkbox :label="3" :key="3" border class="el-checkBox-padding noMarginLeft">分期会员</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </el-form-item>
              </el-row>
                <el-row class="m_b52 labelAlignment">
                <el-form-item label="渠道入口：" prop="channelId" class="wid t_r" label-width="140px">
                  <div class="flex">
                    <el-checkbox class="mr40 el-checkBox-padding noMarginLeft w130 t_l mleft10" border :indeterminate="channelIdIsIndeterminate" v-model="channelIdCheckAll" @change="handleCheckAllChannelIdChange">全选</el-checkbox>
                    <el-checkbox-group v-model="channelId" @change="handleCheckedChannelIdChange">
                      <el-checkbox :label="1" :key="1" border class="mr40 el-checkBox-padding noMarginLeft">企业微信</el-checkbox>
                      <el-checkbox :label="2" :key="2" border class="mr40 el-checkBox-padding noMarginLeft">xxx</el-checkbox>
                      <el-checkbox :label="3" :key="3" border class="mr40 el-checkBox-padding noMarginLeft">yyy</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </el-form-item>
              </el-row>
              <el-row  class="m_b30">
                <el-form-item label="备注：" class="wid" prop="remark">
                  <div style="width:100%;">

                    <el-input clearable class="activityDesc h286" type="textarea" :rows="4" placeholder="请输入备注" v-model="filters.remark"> </el-input>
                  </div>
                </el-form-item>
              </el-row>
            </div>
        </div>
      </el-form>
    </div>

    <!--第三步-->
    <div v-if="active == 3" class="tab-container createSet active2">
      <el-tabs type="border-card"  @tab-click="productTabs">
          <div class="row-line-button" style="float: right;">
            <div>
              <el-button class="searchButton" v-show="showButtons" @click="changeSearchMerchantProductFlag" icon="el-icon-search">搜索</el-button>
              <!-- <el-button class="searchButton" v-if="false" @click="addAllProduct(0)">全部添加</el-button> -->
              <el-button class="searchButton" v-show="showButtons" @click="add">添加促销商品</el-button>
              <el-button class="resetButton" v-show="showButtons" @click="batchDelProduct">批量删除</el-button>
              <!-- <el-button class="searchButton" v-show="!showButtons" @click="batchRenewAdd">批量重新添加</el-button> -->
            </div>
          </div>
          <el-tab-pane :label="noMutexProductLabel">
            <!--  促销商品搜索框 -->
            <div v-if="searchMerchantProductFlag"  class="mb30">
              <el-form :inline="true" :model="mainProductForm" size="mini" ref="mainProductForm" :rules="mainProductFormRules" class="rightForm w100">
                <el-form-item  label="商户：" prop="storeId">
                  <template>
                    <el-select v-model="mainProductForm.storeId" placeholder="全部" clearable>
                      <el-option
                        v-for="item in promotionStoreTableData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
                <el-form-item label="商品编码：" prop="thirdSpuSkuId">
                  <el-input clearable placeholder="商品编码" v-model="mainProductForm.thirdSpuSkuId" maxlength="80"></el-input>
                </el-form-item>
                <el-form-item label="商品名称：" prop="mpName">
                  <el-input clearable placeholder="商品名称" v-model="mainProductForm.mpName" maxlength="80"></el-input>
                </el-form-item>
                <el-form-item label="商品分类：" prop="categoryName">
                  <el-input clearable placeholder="商品分类" v-model="mainProductForm.categoryName" maxlength="80"></el-input>
                </el-form-item>
                <el-form-item  prop="mpName">
                  <el-button class="resetButton" plain size="mini" @click="mainProductTableDataFormFindReset()">重置</el-button>
                  <el-button class="resetButton" size="mini" @click="mainProductTableDataFormFind()">查询</el-button>

                </el-form-item>
              </el-form>
            </div>

            <div class="tableTree">

              <el-table :data="merchantProductTableData" v-loading="productLoading"
                :header-cell-style="tableHeaderColor"
                ref="multipleTable"
                @selection-change="addSelectionChangeMainProduct"
                :row-class-name="tableRowClassName"
                row-key="id"
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                :size="size"
                class="tableStyle">
                 <el-table-column align="left" width="30">
                  <template slot="header" slot-scope="scope">
                    <div class="isAllChecked" v-if="merchantProductTableData && merchantProductTableData.length > 0">
                      <el-checkbox
                        :indeterminate="isIndeterminateProductCheck"
                        v-model="isAllProductChecked"
                        @change="handleCheckedAllProductChange"
                      ></el-checkbox>
                    </div>
                  </template>
                </el-table-column>
<!--                <el-table-column type="selection" width="55" align="center"></el-table-column>-->
                <el-table-column width="40">
                  <template slot-scope="scope">
                    <el-checkbox
                      :indeterminate="scope.row.isIndeterminateCheck"
                      v-model="scope.row.isCheck"
                      @change="handleCheckedProductChange(scope.row,$event)"
                    ></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column prop="mpCode" label="商品编码"  align="left" width="300">
                  <template slot-scope="scope">
                    <span>{{ scope.row.mpCode}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="productName" label="商品名称"  sortable align="center" width="200">
                    <template slot-scope="scope">
                      <span>{{ scope.row.mpName}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="categoryName" label="商品分类" align="center" width="200">
                  <template slot-scope="scope">
                    <span>{{ scope.row.categoryName}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="stock" label="库存" align="center" width="200"></el-table-column>
                <el-table-column prop="storeName" label="所属商户" align="center" width="200">
                  <template slot-scope="scope">
                    <span>{{ scope.row.storeName}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="storeName" label="商户code" align="center" width="200">
                  <template slot-scope="scope">
                    <span>{{ scope.row.storeName}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="salePriceScope" label="零售价（元）" align="center" width="200" >
                  <template slot-scope="scope">
                    <span>{{ scope.row.salePriceScope}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="grouponPrice" label="拼团价（元）" align="center" width="200" >
                  <template slot-scope="scope">
                    <el-input clearable v-model="scope.row.grouponPrice" oninput="value=value.replace(/[^\d\.]/g,'')" :size="size" maxlength="10"  @blur="updatePriceOrLimit(scope.row)" placeholder="拼团价（元）"/>
                  </template>
                </el-table-column>
                <el-table-column prop="parentAllocationScale" v-if="filters.costAllocationFlag == '1'" label="平台分摊" align="center" width="200">
                  <template slot-scope="scope">
                    <el-input clearable v-model="scope.row.parentAllocationScale" oninput="value=value.replace(/[^\d\.]/g,'')" :size="size" maxlength="10"  @blur="updatePriceOrLimit(scope.row)" placeholder="平台分摊"/>
                  </template>
                </el-table-column>
                <el-table-column prop="merchantAllocationScale" v-if="filters.costAllocationFlag == '1'" label="商户分摊" align="center" width="200">
                  <template slot-scope="scope">
                    <el-input clearable v-model="scope.row.merchantAllocationScale" oninput="value=value.replace(/[^\d\.]/g,'')" :size="size" maxlength="10"  @blur="updatePriceOrLimit(scope.row)" placeholder="商户分摊"/>
                  </template>
                </el-table-column>
                 <el-table-column prop="stockLimit" label="活动库存" align="center" width="200">
                    <template slot-scope="scope">
                      <el-input clearable v-model="scope.row.stockLimit" oninput="value=value.replace(/[^\d\.]/g,'')" :size="size" maxlength="10"  @blur="updatePriceOrLimit(scope.row)" placeholder="活动库存"/>
                    </template>
                 </el-table-column>
                <el-table-column prop="channelIndividualLimit" label="个人限购" align="center" width="200" >
                  <template slot-scope="scope">
                    <el-input clearable v-model="scope.row.individualLimit" oninput="value=value.replace(/[^\d]/g,'')" :size="size" maxlength="10"  @blur="updatePriceOrLimit(scope.row)" placeholder="个人限购"/>
                  </template>
                </el-table-column>
                <el-table-column prop="orderLimit" label="订单限购" align="center"  width="200">
                    <template slot-scope="scope">
                      <el-input clearable v-model="scope.row.orderLimit" oninput="value=value.replace(/[^\d]/g,'')" :size="size" maxlength="10"  @blur="updatePriceOrLimit(scope.row)" placeholder="订单限购"/>
                    </template>
                </el-table-column>

                <!-- <el-table-column prop="salePriceScope" label="原价（元）" align="center" width="200">
                  <template slot-scope="scope">
                    <span>{{ scope.row.salePriceScope}}</span>
                  </template>
                </el-table-column> -->
                  <el-table-column label="操作" fixed="right" align="center" width="300">
                    <template slot-scope="scope">
                      <el-button @click.native.prevent="delMerchantProducts(scope.row,scope.row.promotionId,scope.row.mpId)" type="text" size="small"> 删除 </el-button>
                    </template>
                  </el-table-column>
              </el-table>
              <div v-if="merchantProductTableData && merchantProductTableData.length > 0" class="t_r">
                <el-pagination
                  @size-change="mainProductHandleSizeChange"
                  @current-change="mainProductHandleCurrentChange"
                  :current-page="mainProductForm.start"
                  :page-sizes="[10]"
                  :page-size="mainProductForm.limit"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="merchantProductTableDataTotal">
                </el-pagination>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="mutexProductLabel">
            <div class="tableTree">

              <el-table :data="mutexProductList"  row-key="id" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                @selection-change="batchRenewAddSelectionChange" style="width: 100%" class="tableStyle">
<!--                <el-table-column type="selection" width="55"></el-table-column>-->
                <el-table-column align="left" width="30">
                  <template slot="header" slot-scope="scope">
                    <div class="isAllChecked" v-if="mutexProductList && mutexProductList.length > 0">
                      <el-checkbox
                        :indeterminate="isIndeterminateCheck"
                        v-model="isAllChecked"
                        @change="handleCheckedAllChange"
                      ></el-checkbox>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="40">
                  <template slot-scope="scope">
                    <el-checkbox
                      :indeterminate="scope.row.isIndeterminateCheck"
                      v-model="scope.row.isCheck"
                      @change="handleCheckedChange(scope.row,$event)"
                    ></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column prop="mpCode" label="商品编码" width="200"  align="left"></el-table-column>
                <el-table-column prop="mpName" label="商品名称" width="200"></el-table-column>
                <el-table-column prop="categoryName" label="商品分类" width="200"></el-table-column>
                <el-table-column prop="stock" label="库存" width="200"></el-table-column>
                <el-table-column prop="salePriceScope" label="原价（元）" width="200"></el-table-column>
                <el-table-column prop="storeName" label="所属商户" width="200"></el-table-column>
                <el-table-column align="center" fixed="right" label="操作" width="390">
                  <template slot-scope="scope">
                    <el-button @click="getMutexInfo(scope.row)" v-if="scope.row.typeOfProduct==20" type="text" class="textButton" size="small">查看详情</el-button>
                    <el-button @click="renewAdd(scope.row)" v-if="scope.row.typeOfProduct==10 || scope.row.typeOfProduct==20" type="text" class="textButton" size="small">重新添加</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="toolbar t_r" >
                <el-pagination
                  @size-change="handleSizeChangeMutexProductList"
                  @current-change="handleCurrentChangeMutexProductList"
                  :current-page="mutexProductForm.start"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="mutexProductForm.limit"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="mutexProductTotal"
                >
                </el-pagination>
              </div>
            </div>
          </el-tab-pane>
      </el-tabs>
    </div>

    <!--step3##111end-->
    <div v-if="active == 4" class="tab-container tab-success createSet">
      <div class="titleInfo">
        <img src="/static/images/success.png" style="width:20px;"/>
        <span  class="font20">活动创建成功!</span>
      </div>

      <div class="step-button2">
        <el-button class="resetButton" @click="detailList">查看活动列表</el-button>
        <kt-button class="searchButton" v-if="(4==filters.status && auditCount == 0) || shenhe == 0" label="提交审核" @click="shenheHuodong(0)"  type="primary" />
        <kt-button class="searchButton" v-if="shenhe == 1" label="审核" @click="shenheHuodong(1)" type="primary" />
        <!-- <kt-button class="searchButton" v-if="saveTemplateFlag == 0" label="保存模板" @click="saveTemplateModal" perms="market:groupon:addtemp" type="primary" /> -->
      </div>
    </div>
  </div>

  <!-- 上一步 下一步 按钮 -->
  <div class="step-button" v-if="active < 4">
    <el-button class="cancelButton" :plain="active != 1 && active != 4" :size="size" v-if="active != 1 && active != 4" @click="back">上一步</el-button>
    <el-button class="searchButton" v-if="active != 4" :size="size" @click="next">下一步</el-button>
  </div>

    <!--step2###end-->


    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <!-- 添加商品对话框 -->
    <el-dialog :visible.sync="dialogVisibleTwo" title="添加商品" :close-on-click-modal="false">
      <div>
         <el-form :inline="true" :model="productForm" ref="productForm" :size="size" :rules="productFormRules">
             <el-form-item label="商品名称：" prop="chineseName" class="w178 mb30" label-width="112px">
                <el-input clearable v-model="productForm.chineseName" placeholder="商品名称" auto-complete="off" maxlength="80"></el-input>
              </el-form-item>
              <el-form-item label="商品编码：" prop="code" class="w178">
                <el-input clearable v-model="productForm.code" placeholder="商品编码" auto-complete="off" maxlength="80"></el-input>
              </el-form-item>
              <el-form-item label="商品分类：" prop="categoryName" class="w178">
                <el-input clearable v-model="productForm.categoryName" placeholder="商品分类" auto-complete="off" maxlength="80"></el-input>
              </el-form-item>
             <el-form-item label="所属商户名称：" prop="storeName" class="w178">
               <el-input v-model="productForm.storeName" placeholder="所属商户名称" auto-complete="off" clearable maxlength="80"></el-input>
             </el-form-item>
             <el-form-item label="商户Code：" prop="storeCode" class="w178">
               <el-input v-model="productForm.storeCode" placeholder="商户Code" auto-complete="off" clearable maxlength="80"></el-input>
             </el-form-item>
           </el-form>
            <el-row class="mb30 t_r mt20">
              <el-button class="resetButton" icon="el-icon-refresh" size="mini" @click="productFormFindReset()">重置</el-button>
                <el-button class="searchButton"  size="mini" @click="productFormFind()" icon="el-icon-search">搜索</el-button>

                <!-- <el-button class="searchButton"  size="mini" @click="addAllProduct(1)">全部添加</el-button> -->
                <el-button type="primary" plain>已选商品({{productAddSelection.length}})</el-button>
            </el-row>

          <div class="table-section" >
            <el-table
              v-loading="queryProductLoading"
              :data="tableDataTwo"
              @selection-change="addSelectionChangeProduct"
              :header-cell-style="tableHeaderColor"
              ref="multipleTable"
              :row-class-name="tableRowClassName"
              :size="size">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column prop="thirdSpuId" label="商品编码" sortable  align="center"></el-table-column>
              <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
              <el-table-column prop="goodsCategory" label="商品分类" align="center"></el-table-column>
              <el-table-column prop="storeName" label="所属商户" align="center"></el-table-column>
              <el-table-column prop="storeCode" label="商户Code" align="center"></el-table-column>
              <el-table-column prop="salePriceScope" label="原价（元）" align="center"></el-table-column>
            </el-table>
          </div>
          <div v-if="tableDataTwo && tableDataTwo.length > 0" class="t_r">
            <el-pagination
              @size-change="producthandleSizeChange"
              @current-change="producthandleCurrentChange"
              :current-page="productForm.start"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="productForm.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="productListTotal">
            </el-pagination>
          </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button class="cancelButton" @click="dialogVisibleTwo=false" size="mini">取消</el-button>
        <el-button class="searchButton" @click="addProductChange" size="mini">确定</el-button>
      </div>
    </el-dialog>
    <!--setp##-&#45;&#45;111end-->

    <!--审核弹框-->
    <el-dialog title="管理员备注" class="el-dialog-style" :visible.sync="dialogVisibleAdmin" @closed="closedAuditDialog" :close-on-click-modal="false">
      <el-form :model="adminDataForm" :rules="adminDataFormRules" ref="adminDataForm"  :size="size"
               label-position="right" inline>
        <el-form-item prop="auditRemark" class="textarea">
            <el-input clearable
              type="textarea"
              placeholder="请输入备注"
              v-model="adminDataForm.auditRemark"
              :rows="4">
            </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button class="cancelButton" @click.native="submitFormAdminNotPass" >不通过</el-button>
        <el-button class="searchButton" @click.native="submitFormAdmin">通过</el-button>
      </div>
    </el-dialog>
    <!-- 上传图片相关页面2 开始  -->
    <el-dialog title="上传图片选择" :visible.sync="uploadMethodVisible" class="el-dialog-style" :close-on-click-modal="false">
	    <span>
          <el-upload
            class="mb30 uploadStyle t_c"
            drag
            :action="uploadUrl"
            :on-error="imgUploadError"
            :on-success="imgUploadSuccess"
            :show-file-list='showFileList'>
            <el-button class="searchButton" >本地上传</el-button>
          </el-upload>
          <div class="t_c">
              <el-button class="searchButton" @click="materialLibraryVisible=true">素材库上传</el-button>
          </div>
      </span>
    </el-dialog>
    <!-- 素材库 -->
    <el-dialog  title="选择图片" :visible.sync="materialLibraryVisible" >
      <div>
        <el-container>
          <el-aside width="240px" class="mr30">
            <div class="tab-container-dialog">
            <el-tabs  v-model="treeActiveName" type="card" @tab-click="handleClick" :stretch="stretch">
              <el-tab-pane label="我的素材" name="1">
                <el-tree :data="localTreeList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
              </el-tab-pane>
              <el-tab-pane label="平台素材" name="2">
                <el-tree :data="deptTreeList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
              </el-tab-pane>
            </el-tabs>
            </div>
          </el-aside>
          <el-main>
            <div class="material-main">
              <div class="material-header">
                <div class="material-title-left">
                  {{materialTitle}}
                </div>
                <div class="material-title-right" v-if="materialQueryPageFilters.categoryId != null">
                  <el-input clearable type="text" v-model="materialQueryPageFilters.materialName" placeholder="请输入素材名称" size="mini" style="width:180px" maxlength="80"></el-input>
                  <el-button tclass="searchButton" size="mini" @click="handleNodeClick" class="searchButton">搜索</el-button>
                </div>
              </div>
              <div class="material-main-list">
                <div class="material-main-item" :class="[materialList[index].isSelect == true ? 'material-main-item-select' : '']" v-for="(item , index) in materialList" :key="index" @click="selectMaterial(index)">
                  <div class="material-main-item-img">
                    <img :src="item.materialUrl" style="width:100%;height: 100%;"/>
                  </div>
                  <div class="material-main-item-name">
                    {{item.materialName}}
                  </div>
                </div>
                <div v-if="materialList && materialList.length < 1" style="text-align: center;width: 100%;">
                  暂无数据
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
      </div>
      <div class="chosenSelect ">
         <span v-if="materialImgNumber && materialImgNumber.length > 0">已选择图片：{{materialImgNumber}}</span>
         <div v-if="materialList && materialList.length > 0" class="t_r w100">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="materialQueryPageFilters.start"
            :page-sizes="[10]"
            :page-size="materialQueryPageFilters.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="materialListTotal"
            >
          </el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelButton" plain @click="materialLibraryVisible=false" size="mini">取消</el-button>
        <el-button class="searchButton" @click="addMaterial" size="mini">确定</el-button>
      </div>
    </el-dialog>
    <!-- 上传图片相关页面2 结束  -->

        <!-- 互斥活动详情 -->
    <el-dialog :visible.sync="mutexPromotionVisible" title="互斥活动详情" width="70%" :close-on-click-modal="false">
      <div>
        <el-table :data="mutexPromotionList" v-loading="muxProductLoading" ref="multipleTable" :row-class-name="tableRowClassName"  :size="size">
          <el-table-column prop="promotionCode" width="280" label="互斥活动编码" sortable align="center"></el-table-column>
          <el-table-column prop="promName"  width="200" label="互斥活动名称" align="center">
            <template slot-scope="scope">
              <el-button @click="linkInfoByMutexProduct(scope.row.promotionId,scope.row.promType)" type="text" class="textButton" size="small">{{scope.row.promName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="goodsCategory"  width="360" label="互斥活动时间" align="center">
            <template slot-scope="scope">
                <span>{{scope.row.startTime}} - {{scope.row.endTime}}</span>
              </template>
          </el-table-column>
          <el-table-column prop="storeName" label="活动状态" align="center" width="200">
            <template slot-scope="scope">
              <span class="color333 font18" v-if="scope.row.status == 0">待提交</span>
              <span class="color333 font18" v-else-if="scope.row.status == 1">待提交</span>
              <span class="color333 font18" v-else-if="scope.row.status == 2">待审核</span>
              <span class="color333 font18" v-else-if="scope.row.status == 3">未开始</span>
              <span class="color333 font18" v-else-if="scope.row.status == 4">审核不通过</span>
              <span class="color333 font18" v-else-if="scope.row.status == 5">进行中</span>
              <span class="color333 font18" v-else-if="scope.row.status == 6">已过期</span>
              <span class="color333 font18" v-else-if="scope.row.status == 7">已关闭</span>
              <span class="color333 font18" v-else-if="scope.row.status == 8">已结束</span>
              <span class="color333 font18" v-else-if="scope.row.status == 9">活动草稿</span>
            </template>
          </el-table-column>
          <el-table-column prop="creatorName" label="创建人" align="center" width="200"></el-table-column>
          <el-table-column prop="deptName"  label="创建组织" align="center" width="200"></el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar t_r">
          <el-pagination
            @size-change="mutexPromotionListSizeChange"
            @current-change="mutexPromotionListCurrentChange"
            :current-page="mutexPromotionForm.start"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="mutexPromotionForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="mutexPromotionListTotal"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer t_c">
        <el-button class="searchButton" :size="size" @click.native="mutexPromotionVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import TreeSelect from "@/views/Core/TreeSelect";
import { getAllRow, changeChild, changeParent } from "@/assets/js/tableTree.js";

import {
  customerLimitRadio,
  offeredCustomerLimitRadio,
  chanelCodesRadio,
  proPlatformRadio,
  proUserTypeRadio,
  proUserTypeGroupRadio,
  proMemberTypeRadio,
  proMemberLevelRadio
} from "@/market/dict/marketDict";
import { formatDate2 } from "../../../utils/datetime";
import KtButton from "@/views/Core/KtButton";
import marketRequest from "@/market/request/marketRequest";

export default {
  components: {
    TreeSelect,
    KtButton
  },

  // 渲染后
  created() {
    this.promotionId = this.$route.query.id;
    this.auth = this.$route.query.auth;
    this.active = this.$route.query.active;
    if (typeof this.$route.query.active != "undefined") {
      this.active = this.$route.query.active;
    }

  },
  mounted(){
     //活动id
    //0-创建-1-编辑；
    if (typeof this.$route.query.id != "undefined") {
      this.patchGrouponDetail();
    }
    //根据当前url中active参数判断执行第几步方法
    this.nextOrBack();
  },
  // vue 数据
  data() {
    /**
     * 会员类型
     */
    var checkMemType = (rule, value, callback) => {
      if(this.selectMemTypes == null || this.selectMemTypes.length < 1){
        return callback(new Error("请选择会员类型"));
      }

      return callback();

    };
    // 是否分摊活动验证
    let isNumber = (rule, value, callback) => {
      if (value === "") {
        return callback();
      } //这是用来判断如果不是必须输入的，则直接跳出
      const r = /^\+?[1-9][0-9]*$/; // 正整数
      // 如果判断不符合正则，则不是正整数不能提交
      if (!r.test(value)) {
        return callback(new Error("必须为正整数"));
      } else {
        let countScale =
          Number(this.filters.parentAllocationScale) +
          Number(this.filters.merchantAllocationScale);
        if (countScale != 100) {
          return callback(new Error("加起来必须等于100%"));
        } else {
          this.$refs.filters.clearValidate("merchantAllocationScale");
          this.$refs.filters.clearValidate("parentAllocationScale");
          return callback();
        }
        //}
        //return callback();
      }
    };
    //是否分摊活动验证
    let checkCostAllocationFlag = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请选择是否分摊"));
      } else {
        if (value == 1) {
          var parentAllocationScale = this.filters.parentAllocationScale; //母平台分摊比例
          var merchantAllocationScale = this.filters.merchantAllocationScale; //商家分摊比例
          if (parentAllocationScale == null || parentAllocationScale == "") {
            callback(new Error("请输入母平台分摊比例"));
          } else if (
            merchantAllocationScale == null ||
            merchantAllocationScale == ""
          ) {
            callback(new Error("请输入商家分摊比例"));
          }  else if (
            !Number.isInteger(parentAllocationScale) ||
            !Number.isInteger(merchantAllocationScale)
          ) {
            callback(new Error("请输入数字值"));
          } else {
            if (
              Number(parentAllocationScale) +
                Number(merchantAllocationScale) !=
              100
            ) {
              callback(
                new Error("平台、商家分摊比例总和为100")
              );
            } else {
              callback();
            }
          }
        } else {
          callback();
        }
      }
    };

    // 拼团人数验证
    let checkGroupMembersCount = (rule, value, callback) => {
      if (value <= 1) {
        return callback(new Error("拼团人数必须大于1"));
      }
    };

    var checkUserType = (rule, value, callback) => {
      if(this.selectUserType == null || this.selectUserType.length < 1){
        return callback(new Error("请选择新老用户"));
      }

      return callback();
    };
    let checkCNEnNum = (rule, value, callback) => {
      let regChar = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
      if (!regChar.test(value)) {
        callback(new Error("仅支持中英文数字"));
      }
      callback();
    };
    var checkWaringNum = (rule, value, callback) => {
      if(value && Number(value) > 100){
        return callback(new Error("必须小于等于100%"));
      }else{
        return callback();
      }
    };
    //  数据返回
    return {
      channelOption:[],
      mainMerchantFormRules: {
        // orgNumber: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
        // merchantName: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
      },

      merchantFormRules: {
        // orgNumber: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
        // name: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
      },

      storeFormRules: {
        // storeName: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
        // storeCode: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
        // merchantName: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
      },

      mainStoreFormRules: {
        // storecode: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
        // storename: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
      },

      mainProductFormRules: {
        // thirdSpuSkuId: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
        // mpName: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
        // categoryName: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
      },

      productFormRules: {
        // goodsName: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
        // thirdSpuId: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
        // goodsCategory: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
        // storeName: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
      },

      auditCount: 0,
      formLabelWidth: "120px",
      // 活动时间校验
      startTimePickerOptions: {
        disabledDate: time => {
          // if (this.filters.endTime) {
          //   return time.getTime() < Date.now() - 8.64e7 || time.getTime() > new Date(this.filters.endTime).getTime()
          // } else {
          return time.getTime() < Date.now() - 8.64e7;
          // }
        }
      },

      isIndeterminate: true,
      isIndeterminate1: true,
      isIndeterminate2: false,
      isIndeterminate3: true,
      isIndeterminate4: true,

      isIndeterminate9: false,
      isIndeterminate10: false,

      checkAll2: false,
      checkAll9: false,
      checkAll10: false,

      allElection2: [],
      allElection9: [],
      allElection10: [],

      // 用户类型
      proUserTypeGroupRadios: proUserTypeGroupRadio,
      proUserTypeRadios: proUserTypeRadio,
      customerLimitRadios: customerLimitRadio,
      offeredCustomerLimitRadios: offeredCustomerLimitRadio,

      // ----  标签相关实体  开始 ------
      tagsList: [],
      addTagDialogFormVisible: false,
      addTagForm: {
        categoryId: null,
        tagName: null
      },
      tagCategoryList: [],

      // ----  标签相关实体 结束 ------

      // -------   上传图片相关实体 开始  -------
      uploadMethodVisible: false,
      showFileList: false, //是否显示文件列表
      imgUrlList: [], //图片上传
      materialLibraryVisible: false,
      materialImgNumber: 0, //选择素材数
      localTreeList: [], //本地树
      deptTreeList: [], //平台树
      defaultProps: {
        children: "treeInfoList",
        label: "categoryName"
      },
      //treeActiveName
      treeActiveName: "1",
      //查询素材列表分页
      materialQueryPageFilters: {
        start: 1,
        limit: 10,
        materialName: null
      },
      //素材分类tabs选项卡是否自动撑开
      stretch: true,
      //素材列表页title
      materialTitle: "",
      //素材List
      materialList: [],
      materialListTotal: 0, //素材列表总条数

      // -------  上传图片相关实体 结束  -------

      channelList: [], //渠道Tree List
      channlProps: {
        label: "childName"
      },
      deptType: localStorage.getItem("deptType"), //当前登录用户所属组织类型
      labelPosition: "right",
      // 模板名称必填项目
      templateNameRequired: false,
      // groupDisabled:true,
      adminDataForm: {
        auditRemark: ""
      },

      adminDataFormRules: {
        auditRemark: [
          { required: true, message: "审核意见不能为空！", trigger: "change" }
        ]
      },
      dialogVisibleAdmin: false,
      shenhe: 0,
      options: [
        {
          label: "食品",
          children: [
            {
              label: "乳制品",
              children: [
                {
                  label: "乳制品-外国"
                }
              ]
            }
          ]
        }
      ],
      selectedOptions: [],
      formInline: {
        商品分类: "1",
        商品品牌: "1",
        start: 1,
        limit: 10,
        productName: "",
        productNo: "",
        barCode: ""
      },

      // step3--start

      tableDataTwo: [],
      productListTotal: 0,
      productListloading: true,
      merchantProductTableData: [],
      merchantProductTableDataTotal: 0,
      alreadyGoodsTotal: 0,
      dialogVisibleTwo: false,
      tabsIndex: "first",
      productForm: {
        spuId: null,
        thirdSpuId: null,
        chineseName:null,
        code:null,
        goodsName: null,
        storeName: null,
        goodsCategory: null,
        merchantIds: [],
        storeIds: [],
        start: 1,
        limit: 10
      },

      searchMerchantProductFlag: false,
      editMerchantProductFlag: false,
      // step3--end

      dialogImageUrl: "",
      dialogVisible: false,
      size: "mini",
      active: 1,
      // 第一步数据验证
      dataFormRules: {
        budget: [
          { required: true, message: "请输入活动预算", trigger: "blur" }
        ],
        promName: [
          { required: true, message: "请输入活动名称" },
          {
            min: 3,
            max: 60,
            message: "长度在 3 到 60 个字符",
            trigger: "change"
          }
        ],
        selectUserType: [{ required: true, validator: checkUserType, trigger: "change" }],
        selectMemTypes: [{required: true, validator: checkMemType , trigger: "change"}],
        // startTime: [{ required: true, message: "请选择活动时间", trigger: "change" }],
        // endTime: [{ required: true, message: "请选择活动时间", trigger: "change" }],
        promotionStartEndTime: [
          { required: true, message: "请选择活动时间", trigger: "change" }
        ],
        // costAllocationFlag: [{ required: true, validator: checkCostAllocationFlag, trigger: 'blur' }],
        costAllocationFlag: [
          { required: true, message: "请选择是否分摊", trigger: "blur" }
        ],
        parentAllocationScale: [
          { required: true, validator: isNumber, trigger: "blur" }
        ],
        merchantAllocationScale: [
          { required: true, validator: isNumber, trigger: "blur" }
        ],

        groupTimeType: [
          { required: true, message: "请选择团单时长", trigger: "blur" }
        ],
        individualJoinType: [
          { required: true, message: "请选择单用户参团限制", trigger: "blur" }
        ],
        mailType: [
          { required: true, message: "请选择是否包邮", trigger: "change" }
        ],
        groupMembers: [
          { required: true, message: "请输入拼团人数", trigger: "blur" }
        ],
        // { required: true, validator: checkGroupMembersCount, trigger: "blur" }],
        groupType: [
          { required: true, message: "请输入拼团模式", trigger: "blur" }
        ],
        proUserType: [
          { required: true, message: "请输入新老用户", trigger: "blur" }
        ],
        customerLimit: [
          { required: true, message: "请输入开团活动对象", trigger: "blur" }
        ],
        offeredCustomerLimit: [
          { required: true, message: "请输入参团活动对象", trigger: "blur" }
        ],
        warningNum:[
          { required:false, validator:checkWaringNum, trigger:"blur" },
          { required:false, validator:checkWaringNum, trigger:"change" },
        ],
      },
      // 第一步提交FullPromotionCreate
      filters: {
        groupCode: "",
        // "promType":1,//单一促销
        status: "",
        promName: "",
        frontPromType: 26,
        preheatTime: null,
        templateSaveFlag: false,
        templateName: "",
        overLimitRule: 2,
        fileUrl: null,
        channelCodes: [],
        description: null,
           warningProportion:null,
        activityBudget:null,
        activitySearch:null,
        channelIds: [], //渠道Ids
        // //开团用户 多选框使用
        // "customerLimit": [],
        customerLimit: "0",
        // //拼团用户 多选框使用
        // "offeredCustomerLimit": [],
        offeredCustomerLimit: "0",
        remark: "",
        promPlatform: null,
        // //多选框使用
        // "proUserType": [],
        proUserType: "0",
        proMemberType: null,
        proMemberLevel: null,
        // "createMerchantId":11,
        // "createMerchantName":"",
        contentType: 1,
        // "creator":1,
        // "creatorName":"admin",
        // "updator":1,
        // "updatorName":"admin",
        groupMembers: "",
        groupType: "0",
        groupTimeType: "0",
        groupTimeLimit: "",
        autoCompleteTime: "",
        individualJoinType: "0",
        individualJoinTime: "",
        mailType: "0",
        promotionStartEndTime: [],
        startTime: "",
        endTime: "",
        storeArea: 3,
        userArea: 3,
        channelIds: [],
        labelId: null,
        costAllocationFlag: "1",
        parentAllocationScale: null,
        merchantAllocationScale: null,
        searchKeyword:"",
        budget:"",
        warningNum:"",
        fileUrl: null
      },
      //第一步添加成功赋值
      //外部赋值-----------------start
      promotionId: null,
      auth: 0,
      //外部赋值-----------------start
      promotion: {
        //促销id
        id: "",
        promotionId: this.promotionId,
        merchantType: "1"
      },

      // -------------------属性商品开始-----------------------------
      productAddSelection: [],
      productPromotionListObject: { productPromotionList: [] },

      mainProductAddSelection: [],
      mainProductListObject: { mainProductList: [] },

      productEditLoading: false,

      mainProductForm: {
        merchantId: null,
        storeId: null,
        thirdSpuSkuId: null,
        mpName: null,
        categoryName: null,
        promotionId: null,
        start: 1,
        limit: 10,
        orderBys: {
          f: "create_time",
          s: "desc"
        }
      },

      limitNum: 1, // 上传excell时，同时允许上传的最大数
      fileList: [], // excel文件列表

      // --------------------------第四步数据----------------------------------
      saveTemplateFlag: 0,

      templateDataForm: {
        templateName: ""
      },
      templateDialogVisible: false,


      noMutexProductLabel:"生效商品（0）",
      mutexProductForm:{
        promotionId: this.$route.params.id,
        mutexFlag:1,//互斥标识
        start: 1,
        limit: 10
      },
      mutexProductList:[],
      mutexProductTotal:0,
      mutexProductLabel:"互斥商品（0）",
      showButtons:true,
      mutexPromotionForm:{
        promotionId: this.$route.params.id,
        promType: 10,
        start:1,
        limit:10,
      },
      mutexPromotionList:[],
      mutexPromotionListTotal:0,
      mutexPromotionVisible:false,
      batchRenewAddSelection:[],

      selectUserType: [1,2],
      userTypeIsIndeterminate: false,
      userTypeCheckAll: true,

      isAllChecked: false,//全选
      isIndeterminateCheck: false,//全选 checkbox 的不确定状态
      allData: [],//全选 操作数据

      isAllProductChecked: false,//全选
      isIndeterminateProductCheck: false,//全选 checkbox 的不确定状态
      allProductData: [],//全选 操作数据

      //会员等级 会员类型
      memberGradeList: [],
      reloadMemLevel: true,

      //会员类型
      memTypeCheckAll: true,
      selectMemTypes:[1,2,3],
      channelId:[1,2,3],
      channelIdCheckAll:true,
      memTypeIsIndeterminate: false,
      channelIdIsIndeterminate:false,
      merchantLoading: false,
      storeLoading: false,
      queryMerchantLoading: false,
      queryStoreLoading: false,
      productLoading: false,
      queryProductLoading: false,
      muxProductLoading: false,
      uploadUrl:this.utils.imgUploadUrl,

    };
  },

  // 方法开始
  methods: {
    //新老用户
    handleCheckAllUserTypeChange(val) {
      this.selectUserType = val ? [1,2] : [];
      this.userTypeIsIndeterminate = false;
    },
    handleCheckedUserTypeChange(value) {
      let checkedCount = value.length;
      this.userTypeCheckAll = checkedCount === 2;
      this.userTypeIsIndeterminate = checkedCount > 0 && checkedCount < 2;
    },
    patchGrouponDetail(){
      this.promotionId = this.$route.query.id;
      this.promotion.promotionId = this.promotionId;

      //调用详情
      var param = {};
      param.id = this.promotionId;

      let this_ = this;
      let callback = res => {
        if (res.code == "0000") {
          this.filters.id = res.data.id;
          this.filters.groupCode = res.data.groupCode;
          this.filters.promName = res.data.promName;
          this.filters.searchKeyword = res.data.searchKeyword;
          this.filters.budget = res.data.budget;
          this.filters.warningNum = res.data.warningNum;
          // this.filters.startTime = res.data.startTime;
          // this.filters.endTime = res.data.endTime;
          // this_.filters.promotionStartEndTime[0] = new Date(res.data.startTime);
          // this_.filters.promotionStartEndTime[1] = new Date(res.data.endTime);
          this.filters.preheatTime = res.data.preheatTime;
          this.filters.promotionStartEndTime = [];
          this.filters.promotionStartEndTime.push(new Date(res.data.startTime));
          this.filters.promotionStartEndTime.push(new Date(res.data.endTime));

          this.filters.groupTimeType = res.data.groupTimeType.toString();
          if (this.filters.groupTimeType == "1") {
            this.filters.groupTimeLimit = res.data.groupTimeLimit;
          }
          this.filters.autoCompleteTime = res.data.autoCompleteTime;
          this.filters.individualJoinType = res.data.individualJoinType.toString();
          this.filters.individualJoinTime = res.data.individualJoinTime;

          this.filters.proUserType = res.data.proUserType + "";
          // 多选框使用
          // this.filters.proUserType = (res.data.proUserType + "").split("|");
          // this.handleCheckedCitiesChange2(this.filters.proUserType);

          this.filters.mailType = res.data.mailType.toString();
          this.filters.groupMembers = res.data.groupMembers;
          this.filters.groupType = res.data.groupType.toString();

          this.filters.customerLimit = res.data.customerLimit + "";
          // 多选框使用  开团对象
          // this.filters.customerLimit = (res.data.customerLimit + "").split("|");
          // this.handleCheckedCitiesChange9(this.filters.customerLimit);

          this.filters.offeredCustomerLimit =
            res.data.offeredCustomerLimit + "";
          // 多选框使用  拼团对象
          // this.filters.offeredCustomerLimit = (res.data.offeredCustomerLimit + "").split("|");
          // this.handleCheckedCitiesChange10(this.filters.offeredCustomerLimit);

          this.filters.costAllocationFlag = res.data.costAllocationFlag;
          this.filters.parentAllocationScale = res.data.parentAllocationScale;
          this.filters.merchantAllocationScale =
            res.data.merchantAllocationScale;
          this.filters.channelIds =res.data.channelCodes;

          if(res.data.labelId != 0 && res.data.labelId != null){
            this.filters.labelId = Number(res.data.labelId);
          }
          this.filters.description  = res.data.description;
          res.data.fileUrl.forEach(item => {
            this.imgUrlList.push({ url: item });
          });

          this.filters.remark = res.data.remark;
          this.filters.status = res.data.status;

          let selectUserType = [];
          res.data.proUserType.split(",").forEach(item=>{
            selectUserType.push(Number(item));
          });
          this.selectUserType = selectUserType;
          if(selectUserType.length < 2){
            this.userTypeIsIndeterminate = true;
            this.userTypeCheckAll = false;
          }

        } else {
        }
      };

      this.utils.request.patchGrouponDetail(param, callback);
    },
    changeSearchMerchantProductFlag(){
      this.searchMerchantProductFlag = !this.searchMerchantProductFlag;
      this.resetForm("mainProductForm");
    },
    getPromotionStoreTableData(){
      let this_ = this;
      let param = {"promotionId":this.promotionId,"merchantType":2,"pageNo":1, "pageSize":100000};
      this.utils.request.promotionMerchantList2(param, res => {
        if (res.code == "0000") {
          this_.promotionStoreTableData = res.data.list.map((ele, index) => {
            let promotionStore = {};
            promotionStore.id = ele.storeId;
            promotionStore.name = ele.storename;
            return promotionStore;
          });
        }
      });
    },
    /*
       备注无法编辑
      */
    changeRemark(val) {
      this.$forceUpdate();
    },

    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
      }
    },

    // -------  step1  开始 -------

    // 是否分摊
    costAllocationFlagChange(label) {
      this.filters.parentAllocationScale = null;
      this.filters.merchantAllocationScale = null;

      if (label == 0) {
        this.$refs.filters.clearValidate("merchantAllocationScale");
        this.$refs.filters.clearValidate("parentAllocationScale");

        if (this.deptType == 0) {
          this.filters.parentAllocationScale = 100;
        } else if (this.deptType == 2) {
          this.filters.merchantAllocationScale = 100;
        }
      }
    },

    // ---- 开团活动对象  开始  ----
    handleCheckAllChange9(val) {
      this.filters.customerLimit = val
        ? customerLimitRadio.map(function(value, index, array) {
            return value.code;
          })
        : [];
      this.isIndeterminate9 = false;
    },
    handleCheckedCitiesChange9(value) {
      let checkedCount = value.length;
      this.checkAll9 = checkedCount === this.customerLimitRadios.length;
      this.isIndeterminate9 =
        checkedCount > 0 && checkedCount < this.customerLimitRadios.length;
    },

    DefaultFullSelection9() {
      // 初始化 默认全部选中
      this.filters.customerLimit = this.allElection9;
      let checkedCount = this.filters.customerLimit.length;
      this.checkAll9 = checkedCount === this.customerLimitRadios.length;
      this.isIndeterminate9 =
        checkedCount > 0 && checkedCount < this.customerLimitRadios.length;
      // this.selectionFun(this.checkedCities);
    },

    allElectionFun9() {
      // 全选数组
      this.allElection9 = [];
      for (let i = 0; i < this.customerLimitRadios.length; i++) {
        this.allElection9.push(this.customerLimitRadios[i].code);
      }
    },

    // ---- 开团活动对象  结束  ----

    // ---- 参团活动对象  开始  ----
    handleCheckAllChange10(val) {
      this.filters.offeredCustomerLimit = val
        ? offeredCustomerLimitRadio.map(function(value, index, array) {
            return value.code;
          })
        : [];
      this.isIndeterminate10 = false;
    },
    handleCheckedCitiesChange10(value) {
      let checkedCount = value.length;
      this.checkAll10 = checkedCount === this.offeredCustomerLimitRadios.length;
      this.isIndeterminate10 =
        checkedCount > 0 &&
        checkedCount < this.offeredCustomerLimitRadios.length;
    },

    DefaultFullSelection10() {
      // 初始化 默认全部选中
      this.filters.offeredCustomerLimit = this.allElection10;
      let checkedCount = this.filters.offeredCustomerLimit.length;
      this.checkAll10 = checkedCount === this.offeredCustomerLimitRadios.length;
      this.isIndeterminate10 =
        checkedCount > 0 &&
        checkedCount < this.offeredCustomerLimitRadios.length;
      // this.selectionFun(this.checkedCities);
    },

    allElectionFun10() {
      // 全选数组
      this.allElection10 = [];
      for (let i = 0; i < this.offeredCustomerLimitRadios.length; i++) {
        this.allElection10.push(this.offeredCustomerLimitRadios[i].code);
      }
    },
    // ---- 参团活动对象  结束  ----

    // ---- 新老用户  开始  ----
    handleCheckAllChange2(val) {
      this.filters.proUserType = val
        ? proUserTypeGroupRadio.map(function(value, index, array) {
            return value.code;
          })
        : [];
      this.isIndeterminate2 = false;
    },
    handleCheckedCitiesChange2(value) {
      let checkedCount = value.length;
      this.checkAll2 = checkedCount === this.proUserTypeGroupRadios.length;
      this.isIndeterminate2 =
        checkedCount > 0 && checkedCount < this.proUserTypeGroupRadios.length;
    },

    DefaultFullSelection2() {
      // 初始化 默认全部选中
      this.filters.proUserType = this.allElection2;
      let checkedCount = this.filters.proUserType.length;
      this.checkAll2 = checkedCount === this.proUserTypeGroupRadios.length;
      this.isIndeterminate2 =
        checkedCount > 0 && checkedCount < this.proUserTypeGroupRadios.length;
      // this.selectionFun(this.checkedCities);
    },

    allElectionFun2() {
      // 全选数组
      this.allElection2 = [];
      for (let i = 0; i < this.proUserTypeGroupRadios.length; i++) {
        this.allElection2.push(this.proUserTypeGroupRadios[i].code);
      }
    },
    // ---- 新老用户  结束  ----

    // 清除上次的校验提示
    clearValidateProp(formName, prop) {
      this.$refs[formName].clearValidate(prop);
    },

    detailList() {
      this.$router.push({
        path: `/pages/promotionManagement/createGroupon`
      });
    },
    submitFormAdminNotPass() {
      let callback = res => {
        if (res.code == "0000") {
          _this.filters.status = 4;
          _this.auditCount = 1;
        }
      };
      this.adminDataForm.id = this.promotionId;
      //  更新活动状态  审核不通过
      // 7 -> 4  活动状态
      this.adminDataForm.status = 4;
      this.$refs["adminDataForm"].validate(valid => {
        if (valid) {
          this.utils.request.patchGrouponUpdate(this.adminDataForm, callback);
          // 去掉审核按钮
          this.shenhe = 2;
          this.dialogVisibleAdmin = false;
        }
      });
    },
    submitFormAdmin() {
      this.dialogVisibleAdmin = false;

      let callback = res => {
        if (res.code == "0000") {
        }
      };
      this.adminDataForm.id = this.promotionId;
      //  更新活动状态  审核通过
      //  4 ->  3 -> 11活动状态
      this.adminDataForm.status = 11;
      this.utils.request.patchGrouponUpdate(this.adminDataForm, callback);

      // 去掉审核按钮
      this.shenhe = 2;
    },


    // -----------step3-----------方法商品开始-------------------------------

    select(rows) {
      this.dialogVisibleTwo = !this.dialogVisibleTwo;
      this.productSave(rows);
    },

    // 添加促销商品--重置促销商品搜索框
    mainProductTableDataFormFindReset() {

      this.resetForm("mainProductForm");
      this.mainProductTableDataFormFind();
    },
    // 添加促销商品--查询促销商品
    mainProductTableDataFormFind(startFlag) {
      this.mainProductForm.promotionId = this.promotionId;
      if (startFlag == undefined || startFlag != 1) {
        this.mainProductForm.start = 1;
      }
      let this_ = this;
      // this_.utils.request.groupProductList(this.mainProductForm, function (resp) {
      this_.utils.request.groupProductListV2(this.mainProductForm, function(
        resp
      ) {
        if (resp.code == "0000") {
          var ttt = [];
          $.each(resp.data.rows, function(index, value) {
            value.disabled = true;
            ttt.push(value);
          });

          this_.merchantProductTableData = ttt;
          this_.merchantProductTableDataTotal = resp.data.total;
          this_.allProductData = getAllRow(this_.merchantProductTableData, [],this_.filters.costAllocationFlag);
        }
      });

      this_.utils.request.groupProductSkuCount(this.mainProductForm, function(
        res
      ) {
        if (res.code == "0000") {
          this_.alreadyGoodsTotal = res.data;
          if(res.data>9999){
            this_.noMutexProductLabel = "生效商品（9999+）";
          }else{
            this_.noMutexProductLabel = "生效商品（"+res.data+"）";
          }
        }else{
            this_.noMutexProductLabel = "生效商品（0）";
        }
      });
    },

    /**
     * 每页条数刷新
     */
    mainProductHandleSizeChange(val) {
      this.mainProductForm.limit = val;
      this.mainProductTableDataFormFind(1);
    },
    /**
     * 换页刷新
     */
    mainProductHandleCurrentChange(val) {
      this.mainProductForm.start = val;
      this.mainProductTableDataFormFind(1);
    },

    //删除促销商品-todo
    delMerchantProducts(row, promotionId, mpId) {
      // this.$confirm("确认删除选中记录吗？", "提示", {
      //   type: "warning",
      //   closeOnClickModal: false,
      // })
      //   .then(() => {
          let this_ = this;
          let callback = function(res) {
            if (res.code == "0000") {
              // 成功查询本地促销商品
              this_.mainProductTableDataFormFind();
            } else {
              this_.mainProductTableDataFormFind();
              this_.$message({ message: "删除失败", type: "error" });
            }
          };

          let param = {};
          param.mpId = row.mpId;
          param.promotionId = row.promotionId;
          param.patchGrouponMpId = row.id;
          // this.utils.request.groupProductDelete(param, callback);
          this.utils.request.groupProductDeleteV2(param, callback);
        // })
        // .catch(() => {
        //   // this_.$message({ message: "已取消", type: "warning" });
        // });
    },

    handleChange(myArray) {

    },

    //table的编辑和删除
    handleEdit(index, row) {
      row.disabled = !row.disabled;
    },
    //限购控制
    checkProductLimits(row){
      var reg = /^(?!0(\.0{1,2})?$)(\d(\.\d{1,2})?|10)$/;//0-10
      var priceReg = /^\d+\.?\d{0,2}$/; // 2位小数
      var regPos = /^[1-9]([0-9]*)$/; // 非负整数
      // var minPrice = row.salePrice.split("~")[0];
      if(!row.grouponPrice){
        this.$message({ message: "请输入商品拼团价", type: "error" });
        return false;
      }
      if(!priceReg.test(row.grouponPrice)){
        this.$message({ message: "拼团价为正数，支持输入2位小数", type: "error" });
        return false;
      }
      if(row.parentAllocationScale || row.merchantAllocationScale) {
        if (row.parentAllocationScale && !regPos.test(row.parentAllocationScale)) {
          this.$message({message: "平台平摊比例只能输入正整数", type: "error"});
          return false;
        }
        if (row.merchantAllocationScale && !regPos.test(row.merchantAllocationScale)) {
          this.$message({message: "商户平摊比例只能输入正整数", type: "error"});
          return false;
        }
        if (Number(row.parentAllocationScale) + Number(row.merchantAllocationScale) != 100) {
          this.$message({message: "平台和商家分摊比例总和不为100", type: "error"});
          return false;
        }
      }
      if(row.stockLimit && !regPos.test(row.stockLimit)){
        this.$message({ message: "活动库存只能输入正整数", type: "error" });
        return false;
      }
      if(row.individualLimit && !regPos.test(row.individualLimit)){
        this.$message({ message: "个人限购只能输入正整数", type: "error" });
        return false;
      }
      if(row.orderLimit && !regPos.test(row.orderLimit)){
        this.$message({ message: "订单只能输入正整数", type: "error" });
        return false;
      }
      if(Number(row.stockLimit) > row.stock){
        this.$message({ message: "活动库存需小于等于商品库存", type: "error" });
        return false;
      }
      return true;
    },
    // 更新价格或者限量
    updatePriceOrLimit(row) {
      let jsonVal = JSON.stringify(row);
      let callback = function(res) {
        if (res.code == "0000") {
        } else {
          this.$message({
            message: "操作失败",
            type: "warning"
          });
        }
      };

      let temp = {};
      temp.promotionId = row.promotionId;
      temp.mpId = row.mpId;
      temp.grouponPrice = row.grouponPrice;
      temp.individualLimit = row.individualLimit;
      temp.channelMerchantLimit = row.channelMerchantLimit;
      temp.channelStoreLimit = row.channelStoreLimit;
      temp.limitRuleId = row.limitRuleId;
      temp.parentAllocationScale =  row.parentAllocationScale;
      temp.merchantAllocationScale = row.merchantAllocationScale;
      temp.stockLimit = row.stockLimit;
      temp.orderLimit = row.orderLimit;
      var flag = this.checkProductLimits(temp);
      if(!flag){
        return false;
      }

      this.utils.request.groupProductUpdateStockLimit(temp, callback);
    },

    handleSave(index, row) {
      let callback = GrouponStartMgmres => {
        if (res.code == "0000") {
          row.disabled = !row.disabled;
        }
      };
      let temp = {};
      temp.promotionId = row.promotionId;
      temp.mpId = row.mpId;
      temp.grouponPrice = row.grouponPrice;
      temp.individualLimit = row.individualLimit;
      temp.channelMerchantLimit = row.channelMerchantLimit;
      temp.channelStoreLimit = row.channelStoreLimit;

      this.utils.request.groupProductUpdate(temp, callback);
    },
    handleDelete(index, row) {
    },
    handleRemove(file, fileList) {
    },
    handlePictureCardPreview(file) {
      this.filters.fileUrl = file.url;
      this.dialogVisible = true;
    },
    next() {

      let _this = this;
      let callback = res => {
        if (res.code == "0000") {
          _this.promotionId = res.data;
          _this.promotion.promotionId = res.data;

          _this.addActive();
          _this.mainProductTableDataFormFind();
          _this.getMutexProductList();
        } else {
          this.$message({ message: "操作失败", type: "fail" });
          this.active = 1;
        }
      };

      let callbackUpdate = res => {
        if (res.code == "0000") {
          this.addActive();
          _this.mainProductTableDataFormFind();
          _this.getMutexProductList();
        } else {
          this.$message({ message: "操作失败", type: "fail" });
          this.active = 1;
        }
      };

      //保存活动基础配置
      if (this.active == 1) {
        this.$refs["filters"].validate(valid => {
          if (valid) {
            this.filters.promName = this.filters.promName.trim();

            // 给图片地址赋值
            this.filters.fileUrl = this.imgUrlList.map(item => item.url);

            this.filters.startTime = this.filters.promotionStartEndTime[0];
            this.filters.endTime = this.filters.promotionStartEndTime[1];
            this.filters.proUserType = this.selectUserType.join(",");
            //保存会员等级 会员类型
            this.filters.memTypes = this.selectMemTypes.join(",");
            this.filters.channelId = this.channelId.join(",");

            if (this.promotionId == null) {
              this.utils.request.grouponSave(this.filters, callback);
            } else {

              if (
                this.filters.status == 9 &&
                new Date(this.filters.startTime) < new Date()
              ) {

                this.$message({
                  message: "草稿状态下开始时间不能小于当前时间,请修改活动时间"
                });
              } else {
                this.utils.request.patchGrouponUpdate(
                  this.filters,
                  callbackUpdate
                );
              }
            }
          }
        });
      }else if (this.active == 3) {//更新活动状态
        if (this.active == 3 && this.merchantProductTableData && this.merchantProductTableData.length == 0) {
          this.$message({ message: "商品未添加", type: "fail" });
          return;
        }

        let callback = function(res) {
          if (res.code == "0000") {

            _this.addActive();
          } else {
            _this.addActive();
          }
        };
        let param = {};
        param.promotionId = this.promotionId;
        //  更新活动状态  待提交
        // 5 -> 1  活动状态
        param.status = 1;
        this.utils.request.updateGroupPromotionStatus(param, callback);
      }else if (this.active == 2) {
        if (
          this.storeTableData.length == 0 ||
          this.merchantTableData2.length == 0
        ) {
          //判断商家店铺
          _this.$message({ message: "商家或店铺未添加", type: "fail" });
          return;
        }
        // this.getPromotionStoreTableData();
        this.mainProductTableDataFormFind();
        this.getMutexProductList();
        this.addActive();

      }
      if (this.active == 3) {
        this.$message({ message: "操作成功", type: "success" });
        return;
      }
    },

    addActive() {
      if(parseInt(this.active) == 1){
        this.active = parseInt(this.active)  + 2;
      }else{
        this.active = parseInt(this.active)  + 1;
      }

      this.$router.push({ query: { id: this.promotionId ,auth:0,active:this.active} })
      if (this.active > 4) {
        this.$router.push({
          path: "/pages/promotionManagement/createGroupon"
        });
      }
    },
    back() {
      if(parseInt(this.active) == 3){
        this.active = parseInt(this.active) - 2;
      }else{
        this.active = parseInt(this.active) - 1;
      }
      this.$router.push({ query: { id: this.promotionId ,auth:0,active:this.active} })
      this.nextOrBack();
    },

    viewList() {
      this.$emit("viewList");
    },

    // step3--start

    // 单个添加商品
    productSave(row) {
      this.productPromotionListObject.productPromotionList.splice(
        0,
        this.productPromotionListObject.productPromotionList.length
      );

      let temp = {};
      temp.promotionId = this.promotionId;
      temp.mpId = row.id;
      temp.mpName = row.chineseName; // 商品名称
      temp.merchantName = row.name; //商家名称
      temp.storeName = row.storeName; //店铺名称
      temp.salePriceWithTax = row.salePriceWithTax; //零售价
      temp.mpCode = row.code; //商品编码
      temp.mpParentId = row.parentId;
      temp.merchantId = row.merchantId;
      temp.categoryId = row.categoryId;
      temp.picUrl = row.pictureUrl;
      this.productPromotionListObject.productPromotionList.push(temp);

      let callback = res => {
        if (res.code == "0000") {
          // 查询本地促销商品
          this.mainProductTableDataFormFind();
          this.getMutexProductList();
        }
      };

      this.utils.request.groupProductSaveBatch(
        this.productPromotionListObject,
        callback
      );
    },

    // 全部添加商品
    addAllProduct(val) {
      let param = {};
      let that_ = this;
      param.id = this.productForm.id;
      param.goodsName = this.productForm.goodsName;
      param.goodsCategory = this.productForm.goodsCategory;
      param.merchantIds = this.productForm.merchantIds;
      param.promotionId = this.promotionId;


      // 1表示商品弹框中增加
      if (val == 1) {
        this.dialogVisibleTwo = !this.dialogVisibleTwo;
      } else if (val == 0) {
        param.id = null;
        param.goodsName = null;
        param.goodsCategory = null;

      }

      // 店铺集商品
      param.storeIds = [];
      for (let i = 0; i < that_.promotionStoreTableData.length; i++) {
        let storeId = that_.promotionStoreTableData[i].id;
        param.storeIds.push(storeId);
      }

      let callback = res => {
        if (res.code == "0000") {
          if (res.data == 2) {
            this.$message({ showClose: true, message: "无可用商品可添加" });
          } else {
            // 查询本地促销商品
            this.mainProductTableDataFormFind();
            this.getMutexProductList();
          }
        }
      };

      // 增加全部添加的 url
      this.utils.request.groupProductAddAllProduct(param, callback);
    },

    //批量添加商品
    productSaveBatch() {
      this.dialogVisibleTwo = !this.dialogVisibleTwo;
      this.productPromotionListObject.productPromotionList.splice(
        0,
        this.productPromotionListObject.productPromotionList.length
      );
      for (let i = 0; i < this.productAddSelection.length; i++) {
        let temp = {};
        temp.promotionId = this.promotionId;
        temp.goodsSpuId = this.productAddSelection[i].id;
        temp.mpName = this.productAddSelection[i].chineseName; // 商品名称
        temp.merchantId = this.productAddSelection[i].merchantId; //商家id
        temp.merchantName = this.productAddSelection[i].merchantName; //商家名称
        temp.storeName = this.productAddSelection[i].storeName; //店铺名称
        temp.salePriceWithTax = this.productAddSelection[i].salePriceWithTax; //零售价
        temp.mpCode = this.productAddSelection[i].code; //商品编码
        temp.mpParentId = this.productAddSelection[i].parentId;
        temp.merchantId = this.productAddSelection[i].merchantId;
        temp.categoryId = this.productAddSelection[i].categoryId;
        temp.categoryName = this.productAddSelection[i].fullNamePath; // 类别名称
        temp.picUrl = this.productAddSelection[i].pictureUrl;
        this.productPromotionListObject.productPromotionList.push(temp);
      }

      let callback = res => {
        if (res.code == "0000") {
          // 查询本地促销商品
          this.mainProductTableDataFormFind();
          this.getMutexProductList();
        } else {
          this.$message({ message: "添加商品失败", type: "warning" });
        }
      };

      this.utils.request.groupProductSaveBatchV2(
        this.productPromotionListObject,
        callback
      );
    },
    productTableDataSubmit2() {
      this.productSaveBatch();
    },
    //确定 选择商品
    productTableData2Click() {
    },

    /**
     * 确认添加商品
     */
    addProductChange(val) {
      let flag = true;
      this.merchantProductTableData.forEach(res => {
        this.productAddSelection.forEach(item => {
          if (res.id == item.id) {
            flag = false;
          }
        });
      });
      if (!flag) {
        this.$message({ message: "不能添加重复商品", type: "error" });
        return false;
      }

      this.productSaveBatch();
      // if(flag){
      //   // this.tableData.push(row);
      //   this.merchantProductTableData = this.merchantProductTableData.concat(this.productAddSelection);
      //   this.dialogVisibleTwo = !this.dialogVisibleTwo;
      //   this.productAddSelection = [];
      // }
    },

    // 选择商品
    addSelectionChangeProduct(val) {
      let this_ = this;
      this_.productAddSelection = val;

    },

    // 选择促销商品
    addSelectionChangeMainProduct(val) {
      let this_ = this;
      this_.mainProductAddSelection = val;

    },
    //修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:rgb(250,250,250);";
      }
    },
    //table的双色条纹
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    add() {
      this.dialogVisibleTwo = true;
      this.productFormFind();

    },

    // 重置查询商品开始
    productFormFindReset() {

      this.resetForm("productForm");
      this.productFormFind();
    },

    // 查询商品开始
    productFormFind() {
      let that_ = this;
      that_.queryProductLoading = true;
      this.productForm.promotionId = this.promotionId;
      // 店铺集商品
      // this.productForm.storeIds = [];
      // for (let i = 0; i < that_.promotionStoreTableData.length; i++) {
      //   let storeId = that_.promotionStoreTableData[i].id;
      //   this.productForm.storeIds.push(storeId);
      // }
      marketRequest.promotionSpuPageByPromotionId(this.productForm, function(resp) {
        that_.queryProductLoading = false;
        if (resp.code == "0000") {
          // that_.tableDataTwo = resp.data.rows;
          that_.tableDataTwo = resp.data.rows.map((ele, index) => {
            let spu = {};
            spu.id = ele.id;
            spu.thirdSpuId = ele.code;
            spu.goodsName = ele.chineseName;
            spu.totalStock = ele.totalStock;
            spu.goodsCategory = ele.fullNamePath;
            spu.merchantName = ele.merchantName;
            spu.storeName = ele.storeName;
            spu.salePriceScope = ele.salePriceWithTax;
            // spu.measureUnit = ele.measureUnit;
            return spu;
          });
          that_.productListTotal = resp.data.total;
        }
      });
    },

    /**
     * 条数刷新
     */
    producthandleSizeChange(val) {
      this.productForm.limit = 1;
      this.productForm.limit = val;
      this.productFormFind();
    },
    /**
     * 换页刷新
     */
    producthandleCurrentChange(val) {
      this.productForm.start = val;
      this.productFormFind();
    },

    handleCheckedAllProductChange(value) {
      ////
      this.isIndeterminateProductCheck = false;

      this.allProductData.forEach(f => {
        f.isCheck = value;
        f.isIndeterminateCheck = false;
      });
    },
    handleCheckedChange(row, checked) {
      ////
      if (row.isIndeterminateCheck) {
        row.isCheck = true;
        checked = true;
      }
      row.isIndeterminateCheck = false;

      changeChild(row, checked);
      changeParent(row, this.allData);

      this.isAllChecked = this.allData.every(e => {
        return e.isCheck;
      });

      this.isIndeterminateCheck =
        !this.isAllChecked &&
        this.allData.some(e => {
          return e.isCheck;
        });
    },
    handleCheckedAllChange(value) {
      ////
      this.isIndeterminateCheck = false;

      this.allData.forEach(f => {
        f.isCheck = value;
        f.isIndeterminateCheck = false;
      });
    },

    // 批量删除
    batchDelProduct() {
      let ids = [];
      this.allProductData.forEach(function(item,index,array){
        //判断父下面是否全选
        if(item.typeOfProduct == '10' && item.isCheck){
          if(item.children && item.children.length > 0){
            let isCheckItems = item.children.filter(function (subItem, index) {
              return !subItem.isCheck;
            });
            if(!(isCheckItems && isCheckItems.length > 0)){
              ids.push(item.id);
            }
          }else{
            ids.push(item.id);
          }
        }else if(item.typeOfProduct == '20' && item.isCheck){
          ids.push(item.id);
        }
      });
      if (ids.length == 0) {
        this.$message({ message: "未选择删除条目", type: "error" });
        return;
      }

      this.$confirm('确认批量删除已选内容？', "提示", {
        type: "warning",
        closeOnClickModal: false,
      }).then(() => {
        let this_ = this;
        let callback = function(res) {
          if (res.code == "0000") {
            // 成功查询本地促销商品
            // this_.getProductListV2(0, null);
            this_.mainProductTableDataFormFind();
          } else {
            this.$message({ message: "删除商品失败", type: "fail" });
          }
        };
        let param = {};
        param.ids = ids;
        // marketRequest.promotionMerchantProductDeleteBatch(param, callback);

        for (let i = 0; i < this.allProductData.length; i++) {
          let temp = {};
          temp.promotionId = this.allProductData[i].promotionId;
          temp.mpId = this.allProductData[i].mpId;
          temp.id = this.allProductData[i].id;
          this.mainProductListObject.mainProductList.push(temp);
        }

        this.utils.request.groupProductDeleteProductBatchV2( this.mainProductListObject, callback);
      }).catch(() => {});
    },
    handleCheckedProductChange(row, checked) {
      ////
      if (row.isIndeterminateCheck) {
        row.isCheck = true;
        checked = true;
      }
      row.isIndeterminateCheck = false;

      changeChild(row, checked);
      changeParent(row, this.allProductData);

      this.isAllProductChecked = this.allProductData.every(e => {
        return e.isCheck;
      });

      this.isIndeterminateProductCheck =
        !this.isAllProductChecked &&
        this.allProductData.some(e => {
          return e.isCheck;
        });
    },
    // step3--end

    // step4--start

    closedAuditDialog() {
      this.clearValidateProp("adminDataForm", "auditRemark");
    },

    shenheHuodong(flag) {
      // 提交审核
      if (flag == 0) {
        this.$confirm("确认提交审核？", "提示", {
          type: "warning",
          closeOnClickModal: false,
        })
          .then(() => {
            let callback = res => {
              if (res.code == "0000") {
                this.shenhe = 1;
              } else {
                this.$message({ message: res.msg, type: "warning" });
              }
            };
            let param = {};
            param.promotionId = this.promotionId;
            //  更新活动状态  待审核
            //  6 ->2 活动状态
            param.status = 2;
            this.utils.request.updateGroupPromotionStatus(param, callback);
          })
          .catch(() => {});
        //  审核弹框
      } else {
        // this.shenhe = 2;
        this.dialogVisibleAdmin = true;
        //
        // let callback = res => {
        //   if (res.code == "0000" && res.data=="1") {
        //     this.$message({message: "已提交申请", type: "success"});
        //     this.$router.push({
        //       path: `/pages/promotionManagement/createGroupon`,
        //     })
        //
        //   }else{
        //     this.$message({message: "操作失败, " + res.msg, type: "error"});
        //   }
        // };
        // let param ={};
        // param.promotionId    =this.promotionId;
        // param.status         =4;
        // this.utils.request.updateGroupPromotionStatus(param,callback);
      }
      // this.$message({ message: "操作成功", type: "success" });
    },

    // 调用保存模板对话框
    saveTemplateModal() {
      this.templateDialogVisible = true;
      this.$nextTick(() => {
        this.$refs['templateDataForm'].clearValidate();
      });
    },

    //保存模板方法
    saveTemplate() {
      let this_ = this;
      let params = Object.assign({}, this_.templateDataForm);
      params.promotionId=this.filters.groupCode;
      this.$refs["templateDataForm"].validate(valid => {
        if (valid) {
          this.utils.request.grouponSaveTemplate(params, function(res) {
            if (res.code == "0000") {
              this_.saveTemplateFlag = 1;
              this_.$message({ message: "保存成功", type: "success" });
              this_.templateDialogVisible = false;
            } else {
              this_.$message({ message: "保存失败", type: "error" });
            }
            this_.templateDataForm.templateName = ""
          });
        }
      })
    },




    /**
     * 查询互斥商品
     */
    getMutexProductList() {
      var this_ = this;
      this.mutexProductForm.promotionId = this.promotionId;
      this_.utils.request.groupProductListV2(this.mutexProductForm, function(res) {
        if (res.code == "0000" && res.data && res.data.rows) {

          this_.mutexProductList = res.data.rows;
          this_.mutexProductTotal = res.data.total;
          //操作数据
          this_.allData = getAllRow(this_.mutexProductList, []);
          this_.isAllChecked = false;
          this_.isIndeterminateCheck = false;
        }
      });

      this_.utils.request.groupProductSkuCount(this.mutexProductForm, function( res) {
        if (res.code == "0000") {
          if(res.data>9999){
            this_.mutexProductLabel = "互斥商品（9999+）";
          }else{
            this_.mutexProductLabel = "互斥商品（"+res.data+"）";
          }
        }
      });
    },
    /**
     * 每页条数改变触发
     */
    handleSizeChangeMutexProductList(val){
      this.mutexProductForm.limit = val;
      this.mutexProductForm.start = 1;
      this.getMutexProductList();
    },
    /**
     * 换页刷新
     */
    handleCurrentChangeMutexProductList(val){
      this.merchantProductSearchForm.start = val;
      this.getMutexProductList();
    },

    /**
     * 互斥商品重新添加
     */
    renewAdd(row){
      let that = this;
      let param = {};
      var productIdList = [];
      param.promotionId = row.promotionId;
      param.promotionType = 2;
      if(row.typeOfProduct == '10'){
          //spu
          row.children.forEach(item=>{
            productIdList.push(item.id);
          })
      }else if(row.typeOfProduct == '20'){
        productIdList.push(row.id);
      }
      param.productIdList = productIdList;
      this.utils.request.renewAddMutexProduct(param,res=>{
        if(res.code=='0000'){
          that.getMutexProductList();
          that.mainProductTableDataFormFind();
          let data = res.data;
          if(data.businessCode == '0001'){
            that.$message({message: data.businessMsg, type: "success"});
          }else if(data.businessCode == '0002'){
            that.$message({message:data.businessMsg, type: "error"})
          }else if(data.businessCode == '0003'){
            that.$alert(data.businessMsg, '提示', {
              confirmButtonText: '知道了',
              callback: action => {}
            });
          }
        }
      });
    },

    /**
     * 批量重新添加选择数据
     */
    batchRenewAddSelectionChange(val) {
      this.batchRenewAddSelection = val;
    },

    /**
     * 批量重新添加
     */
    batchRenewAdd(){
      let that = this;
      let param = {};
      var productIdList = [];
      param.promotionId = this.promotionId;
      param.promotionType = 2;
      this.allData.forEach(function(item,index,array){
        if(item.typeOfProduct == '20' && item.isCheck){
          productIdList.push(item.id);
        }
      });
      if (productIdList.length < 1) {
        this.$message({ message: "未选择重新添加条目", type: "error" });
        return;
      }
      param.productIdList = productIdList;
      this.utils.request.renewAddMutexProduct(param,res=>{
        if(res.code=='0000'){
          that.getMutexProductList();
          // that.getProductListV2(0, null);
          that.mainProductTableDataFormFind();
          let data = res.data;
          if(data.businessCode == '0001'){
            this.$message({message: data.businessMsg, type: "success"});
          }else if(data.businessCode == '0002'){
            this.$message({message:data.businessMsg, type: "error"})
          }else if(data.businessCode == '0003'){
            this.$alert(data.businessMsg, '提示', {
              confirmButtonText: '知道了',
              callback: action => {}
            });
          }
        }
      });
    },

    /**
     * 生效商品 互斥商品tab选中触发
     */
    productTabs(tab){
      if(tab.index==0){
        this.showButtons = true;
      }else{
        this.showButtons = false;
      }
    },
    /**
     * 互斥商品查看详情
     */
    getMutexInfo(row){
      let that = this;
      this.mutexPromotionForm.promotionMerchantProductId = row.id;
      this.getPromotionMutexListByProductId();
    },
    getPromotionMutexListByProductId(){
      let that = this;
      this.utils.request.getPromotionMutexListByProductId(this.mutexPromotionForm,res=>{
        if(res.code=='0000'){
            that.mutexPromotionList = res.data.rows;
            that.mutexPromotionListTotal = res.data.total;
            that.mutexPromotionVisible = true;
        }
      });
    },

    //会员类型
    handleCheckAllMemTypeChange(val) {
      this.selectMemTypes = val ? [1,2,3] : [];
      this.memTypeIsIndeterminate = false;
    },
    handleCheckedMemTypeChange(value) {
      let checkedCount = value.length;
      this.memTypeCheckAll = checkedCount === 2;
      this.memTypeIsIndeterminate = checkedCount > 0 && checkedCount < 2;
    },
    //渠道
      handleCheckAllChannelIdChange(val) {
        this.channelId = val ? [1,2,3] : [];
        this.channelIdIsIndeterminate = false;
      },
      handleCheckedChannelIdChange(value) {
        let checkedCount = value.length;
        this.channelIdCheckAll = checkedCount === 3;
        this.channelIdIsIndeterminate = checkedCount > 0 && checkedCount < 3;
      },

    /**
     * 每页条数改变触发
     */
    mutexPromotionListSizeChange(val){

      this.mutexPromotionForm.limit = val;
      this.mutexPromotionForm.start = 1;
      this.getPromotionMutexListByProductId();
    },
    /**
     * 换页刷新
     */
    mutexPromotionListCurrentChange(val){

      this.mutexPromotionForm.start = val;
      this.getPromotionMutexListByProductId();
    },
    /**
     * 点击活动名称跳转详情
     */
    linkInfoByMutexProduct(promotionId,type){
      if(type == 1){
        this.$router.push({ path: "/SinglePromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/SinglePromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 2){
        this.$router.push(`/FullNumPromotionDetailNew?id=${promotionId}&auth=0`);
      }else if(type == 3){
        this.$router.push({ path: "/FullPromotionDetailNew/" + promotionId + "/0"});
        //this.$router.push(`/FullPromotionDetailNew?id=${promotionId}&auth=0`);
      }else if(type == 4){
        this.$router.push(`/SeckillDetail?promotionId=${promotionId}`);
      }else if(type == 5){
        this.$router.push({ path: "/GiftPromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/GiftPromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 6){
        this.$router.push({ path: "/ComplexPromotionInfo/" + promotionId});
      }else if(type == 7){
        this.$router.push({ path: "/XofferPromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/XofferPromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 8){
        this.$router.push({ path: "/IncreasePromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/IncreasePromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 9){
        this.$router.push(`/QueryPresellPromotion?value=${promotionId}&auth=0`);
      }else if(type == 10){
        this.$router.push("/GroupDetailPromotion?id=" + `${promotionId}`);
      }else if(type == 12){
        this.$router.push(`/QueryPromotion?value=${promotionId}&auth=0`);
      }
    },
    nextOrBack(){
      //根据当前url中active参数判断执行第几步方法
      if (this.active){
        if(parseInt(this.active) == 3){
          this.$nextTick(()=>{
            this.mainProductTableDataFormFind();
            this.getMutexProductList();
            this.getPromotionStoreTableData();
          })

        }
      }
    },
    // ------   上传图片相关方法  开始    -------
    /**
     * 本地上传图片成功回调
     */
    imgUploadSuccess(file) {
      this.imgUrlList.push({ url:file.data.imgUrl});
      this.uploadMethodVisible = false;
    },
    imgUploadError(err, file, fileList) {
      this.$message({ message: "文件上传失败,请重新上传", type: "error" });
    },
    /**
     * 选择上传方式弹窗
     */
    selectUploadMethod() {
      this.uploadMethodVisible = true;
    },
    /**
     * 鼠标移入
     */
    mouseEnter(index) {
      this.imgUrlList[index].hover = true;
    },
    /**
     * 鼠标移出
     */
    mouseLeave(index) {
      this.imgUrlList[index].hover = null;
    },

    /**
     * delete图片列表
     */
    deleteImgUrlList(index) {
      this.imgUrlList.splice(index, 1);
    },

    uploadMethod(val) {
      let param = new FormData();
      //通过append向form对象添加数据
      param.append("file", val.file);
      //FormData私有类对象，访问不到，可以通过get判断值是否传进去
      this.utils.request.upload(param,res=>{
        if(res.code == '0000'){
          this.imgUrlList.push({ url: res.data.imageUrl, hover: null });
          this.uploadMethodVisible = false;
          this.$message({ message: "上传成功", type: "success" });
        }else{
          this.$message({ message: "上传失败，请重试", type: "error" });
        }
      });
    },

    // ------   素材相关方法  -------

    /**
     * 查询素材树
     */
    materialQueryTree() {
      let that = this;
      this.utils.request.materialQueryTree({}, res => {
        this.deptTreeList = res.data.deptTreeList;
        this.localTreeList = res.data.localTreeList;
      });
    },

    /**
     * 菜单树选项卡
     */
    handleClick(val) {},

    /**
     * 菜单树选项卡
     */
    handleNodeClick(data) {
      if (data != undefined && data.id != null) {
        this.materialQueryPageFilters.materialName = null;
      }
      this.materialTitle =
        data != undefined && data.categoryName != null
          ? data.categoryName
          : this.materialTitle;
      this.materialQueryPageFilters.categoryId =
        data != undefined && data.id != null
          ? data.id
          : this.materialQueryPageFilters.categoryId;
      this.materialQueryPageFilters.materialName =
        this.materialQueryPageFilters.materialName == ""
          ? null
          : this.materialQueryPageFilters.materialName;
      this.utils.request.materialQueryPage(
        this.materialQueryPageFilters,
        res => {
          res.data.rows.forEach(item => {
            item.isSelect = false;
          });
          this.materialList = res.data.rows;
          this.materialListTotal = res.data.total;
        }
      );
    },

    /**
     * 换页
     */
    handleCurrentChange(val) {
      this.materialQueryPageFilters.start = val;
      this.handleNodeClick(undefined);
    },

    /**
     * 素材列表条数
     */
    handleSizeChange(val) {
      this.materialQueryPageFilters.limit = val;
      this.handleNodeClick(undefined);
    },

    /**
     *选择素材
     */
    selectMaterial(index) {
      if (this.materialList[index].isSelect == undefined) {
        this.materialList[index].isSelect = false;
      }
      if (this.materialList[index].isSelect) {
        this.materialImgNumber--;
      } else {
        this.materialImgNumber++;
      }
      this.materialList[index].isSelect = !this.materialList[index].isSelect;
    },

    /**
     * 素材确认
     */
    addMaterial() {
      let flag = true;
      this.materialList.forEach(item => {
        if (item.isSelect) {
          flag = false;
          this.imgUrlList.push({ url: item.materialUrl, hover: null });
        }
      });
      if (flag) {
        this.$message({ message: "请选择要选用素材", type: "warning" });
        return false;
      }
      this.materialLibraryVisible = false;
      this.uploadMethodVisible = false;
      this.$message({ message: "选用成功", type: "success" });
    },

    // ------   上传图片相关方法  结束    -------
  }
};
</script>

<style scoped lang="scss">
@import '../../../assets/css/public.scss';
/deep/ .is-bordered{
  padding: 12px 20px 12px 10px;
}
.mleft10 {
  margin-right: 10px;
}
.material-main {
  width: 99%;
  background: #fff;
  // -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
  // box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);

  position: relative;
}
.material-header {
  display: flex;
  justify-content: space-between;
}
.material-title-right {
  // margin-top: 20px;
  /deep/ .el-input {
    width: 274px;
  }
  /deep/ .el-input__icon {
    line-height: 32px;
  }
}
.material-title-left {
  // margin-top: 20px;
  margin-left: 20px;
  font-size: 16px;
  color: #409eff;
  display: inline-block;
  height: 32px;
  line-height: 32px;
}
.material-main-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 20px;

  .material-main-item {
    position: relative;
    margin-left: 17px;
    padding: 10px;
    margin-bottom: 20px;
    background-color: #f0f0f0;
    border-radius: 4px;
    // box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    .material-main-item-delete {
      position: absolute;
      top: 15px;
      right: 15px;
      z-index: 999;
      span {
        color: #fff;
      }
    }
  }
}
.material-main-item-img {
  width: 110px;
  height: 110px;
}
.material-main-item-name {
  width: 60%;
  margin-top: 6px;
  color: #909399;
  float: left;
  /deep/ .el-input {
    width: 80px;
    /deep/ .el-input__inner {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      height: 25px !important;
    }
  }
}
.editText {
  display: block;
  width: auto;
  height: 25px;
  line-height: 32px;
  margin-top: 5px;
  float: right;
}
.material-main-item-select {
  border: 1px solid #409eff;
}
.font12 {
  font-size: 12px;
}
.uploader {
  float: left;
  margin: 20px 0 0 20px;
}
/deep/ .el-tabs {
  border: 1px solid rgba(216, 216, 216, 1);
  /deep/ .el-tab-pane {
    padding: 40px 0 60px 23px;
  }
  /deep/ .el-tabs__nav-wrap {
    padding: 0;
    border: none;
  }
}
.tab-container-dialog {
  /deep/ .el-tabs__item {
    width: 102px !important;
  }
  /deep/ .el-tabs__item {
    border: none !important;
    border-bottom: 1px solid rgba(216, 216, 216, 1) !important;
    color: #909399 !important;
    &.is-active {
      color: #fff !important;
      background-color: #409eff;
    }
  }
  /deep/ .el-tabs__item.is-active::after {
    width: 0 !important;
  }
  // /deep/ .el-tabs__item:last-child{

  // }
}
.pagination {
  margin-top: 60px;
}
.material-title-right {
  .searchButton {
    display: block;
    float: right;
    margin-left: 20px;
  }
}
.img-card {
  width: 140px;
  height: 140px;
  margin:10px 0 10px 10px;
   position: relative;
   .deleteButton {
    position: absolute;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
  }
}
.m_l20{
  display: inline-block;
  margin-left: 20px;
}
.m_r20{
  margin-right: 20px;
}

.flexBox{
  display: flex;
  flex-wrap: nowrap;
  align-content: flex-start;
  .child-name{
    flex-shrink: 0;
  }
  .checkboxes{
    display: flex;

  }

}

.pdl49{
  padding-left: 49px;
}
.pdl90{
  padding-left: 90px;
}

.errorTipsAlignment{
  /deep/ .el-form-item__content{
    .el-form-item__error{
      position: absolute !important;
      top: -3px !important;
      left: 139px !important;
    }
  }
}

.w126{
  width: 126px;
}
.oe{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.width100{
  width: 97px;
}
.w104{
  width: 104px;
}
.ml60{
  margin-left: 60px;
}
.pdl30{
  padding-left: 30px;
}
.pdt20{
  padding-top: 20px;
}
/deep/ .el-tabs--border-card>.el-tabs__content{
  padding: 0 !important;
}
 .el-tabs /deep/ .el-tab-pane{
  padding: 40px 0 60px 0 !important;
}
.width450{
  width: 450px !important;
  /deep/ .el-input__inner{
    width: 450px !important;
  }
}
.w198{
  width: 198px !important;
  /deep/ .el-input__inner{
    width: 198px !important;
  }
}
.w250{
  width: 284px !important;
  /deep/ .el-input__inner{
    width: 284px !important;
  }
}
</style>
